<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/my/set.css" />
		<style type="text/css">
			.contact {
				margin-top: 6rem;
			}
		
			#info {
				width: 90%;
				margin-left: 5%;
				line-height: 3rem;
			}
			
			.name {
				font-size: 1.6rem;
			}
			
			.mapArea {
				width: 90%;
				height: 25rem;
				margin: 1rem 5%;
				position: relative;
			}
			
			#changeBtn {
				width: 7rem;
				background: #FF9F40;
				height: 5rem;
				position: absolute;
				top: 0;
				left: 0;
				color: #FFFFFF;
				z-index: 1000000000000;
				text-align: center;
				line-height: 5rem;
			}
			
			#map {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#all {
				display: none;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				
			}
		</style>
	</head>

	<body>
		<!--顶部标题栏-->
		<!--页面标题-->
		<header>
			<div class="back"></div>
			<div class="title">联系我们</div>

		</header>
		<div class="contact">
			<div id="info">
				<p class="name">北京市XXX科技有限公司</p>
				<p>电 话：0851-87666888</p>
				<p>传 真：0851-87666888</p>
				<p>Q &nbsp;Q：000000</p>
				<p>邮 箱：00000000@qq.com</p>
				<p>地 址：北京市海淀区中关村大街49号</p>
			</div>
			<div class="mapArea">
				<div id="changeBtn">
					切换
				</div>
				<!--百度地图容器-->
				<div id="map"></div>
				<div id="all"></div>
			</div>
		</div>
		<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=GZa8TBdVm8UhTmmAPzXrHxIwjUEG1oac"></script>
		<script type="text/javascript">
			$(".back").click(function() {
				window.History.back();
			})
			// 百度地图API功能
			var map = new BMap.Map("map");
			var point = new BMap.Point(116.324898, 39.978101);
			map.enableScrollWheelZoom(true);
			map.centerAndZoom(point, 18);
			var marker = new BMap.Marker(point); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			var opts = {
				width: 260, // 信息窗口宽度
				height: 100, // 信息窗口高度
				title: "北大青鸟中关村校区", // 信息窗口标题
				enableMessage: true //设置允许信息窗发送短息
			}
			var infoWindow = new BMap.InfoWindow("地址：北京市海淀区中关村大街49号", opts); // 创建信息窗口对象 
			marker.addEventListener("click", function() {
				map.openInfoWindow(infoWindow, point); //开启信息窗口
			});

			var panorama = new BMap.Panorama('all');
			panorama.setPosition(new BMap.Point(116.324898, 39.978101));
			var panoramaService = new BMap.PanoramaService();

			//切换查看方式
			var click = 0
			$("#changeBtn").click(function() {
				click++;
				if(click % 2 === 1) {
					$("#map").fadeOut(1000);
					$("#all").fadeIn(1000);
				} else {
					$("#all").fadeOut(1000);
					$("#map").fadeIn(1000);
				}
			})
		</script>
	</body>

</html>